<template>
     <div style="border: 1px solid #ccc">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
          />
          <Editor
            style="height: 300px; overflow-y: hidden;"
            @onChange="onChange"
            @onCreated="handleCreated"
          />
        </div>
        <!-- <el-button @click="getHtml">点击获取内容</el-button> -->
</template>
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, onMounted, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
// const valueHtml = ref('<p>hello</p>')


// 模拟 ajax 异步获取内容
onMounted(() => {
   console.log(props.modelValue);
   
})
let props = defineProps({
      modelValue: {
        type: String,
        default: ""
    }
}
)
let emit = defineEmits(["update:modelValue"])

const onChange = (editor: any) => { 
     console.log(editor.getHtml())
    emit('update:modelValue', editor.getHtml())
}

watch(() => props.modelValue, (newValue: any, oldValue: any) => {
    console.log("我感应到你的输入的内容是：");
    editorRef.value.setHtml(newValue)
})
const handleCreated = (editor:any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    // console.log(editor.getHtml());
    
}


</script>
<style scoped>


</style>
